<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<div id="one">
			<p>000</p>
			<p>111</p>
		</div>
		
		<h1 class="two">
			<p>222</p>
		</h1>
		
		<p>333</p>
		<p>444</p>
		
		<script>
			//1.8 通过 选择器(css) 获取元素  *, id，class,后代，子代，群组,元素...
			//1.8.1   querySelector 只能获取第一个
			//console.log(document.querySelector("#one p"));//单个元素
			
			//1.8.2  querySelectorAll 获取满足选择器所有的元素
			//console.log(document.querySelectorAll("#one p"));//集合
			
			//console.log(document.querySelectorAll("p"));
			
			// console.log(document.querySelectorAll("h1>p"));
			// console.log(document.querySelectorAll(".two>p"));
			//console.log(document.querySelectorAll("*"));
			
			//console.log(document.querySelectorAll("#one p")[0]);
			
			//获取整个屏幕的宽度(兼容写法)
			let w=document.documentElement.clientWidth||document.body.clientWidth;
			console.log(w);
			
			//获取整个屏幕的高度(兼容写法)
			let h=document.documentElement.clientHeight||document.body.clientHeight;
			console.log(h);
		</script>
	</body>
</html>
